import {
  Select,
  Input,
  Button,
  Form,
  Table,
  message,
  Modal,
  Radio,
} from 'antd';
import { getList, deleteList } from '../../../Api/Api';
const { Option } = Select;
import { useState, useEffect } from 'react';

import './Distribution.less';

export default function Distribution() {
  const [dataSource, setDataSource] = useState([]);
  const [all, setAll] = useState(0);
  function onFinish(value: any) {
    console.log(value, 123);
    getList({ page: 1, limit: 5, where: value }).then((res) => {
      console.log(res, 123);
      res.data.res.map((item) => {
        item.key = item.id;
      });
      setDataSource(res.data.res);
      setAll(res.data.all);
    });
  }

  useEffect(() => {
    getList({ page: 1, limit: 5, where: { orderStatus: 0 } }).then((res) => {
      console.log(res);
      res.data.res.map((item) => {
        item.key = item.id;
      });
      setDataSource(res.data.res);
      setAll(res.data.all);
    });
  }, []);

  function handleDel(e: any) {
    console.log(e, 777777);
    let arr = [];
    for (let index = 0; index < dataSource.length; index++) {
      if (e.id !== dataSource[index].id) {
        arr.push(dataSource[index]);
      }
    }
    deleteList({ id: e.id }).then((res: any) => {
      console.log(res, 123);
      setDataSource(arr);
      message.success(res.msg);
    });
  }

  function Print() {
    var printBox = document.getElementById('table');
    var newContent = printBox.innerHTML;
    var oldContent = document.body.innerHTML;
    document.body.innerHTML = newContent;
    window.print();
    window.location.reload();
    document.body.innerHTML = oldContent;
    return false;
  }

  const columns = [
    {
      title: '商品编号',
      dataIndex: 'tradeNumber',
      key: 'tradeNumber',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      render: (_: any, record: any) => <span>{record.information.name}</span>,
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
      render: (_: any, record: any) => <span>{record.information.phone}</span>,
    },
    {
      title: '收件地址',
      dataIndex: 'address',
      key: 'address',
      render: (_: any, record: any) => (
        <span>{record.information.address}</span>
      ),
    },
    {
      title: '订单状态',
      dataIndex: 'orderStatus',
      key: 'orderStatus',
    },
    {
      title: '快递单号',
      dataIndex: 'orderNumber',
      key: 'orderNumber',
    },
    {
      title: '订单图片',
      dataIndex: 'clothing',
      key: 'clothing',
      render: (record: any) => <img width="50" height="20" src={record}></img>,
    },
    {
      title: '订单规格',
      dataIndex: 'specs',
      key: 'specs',
    },
    {
      title: '宝贝数量',
      dataIndex: 'count',
      key: 'count',
    },
    {
      title: '留言备注',
      dataIndex: 'remarks',
      key: 'remarks',
    },
    {
      title: '操作',
      render: (_: any, value: any) => {
        return (
          <a
            onClick={() => {
              handleDel(value);
            }}
          >
            删除
          </a>
        );
      },
    },
  ];
  function CheckChange(e) {
    console.log(e, 123);
    getList({ page: e, limit: 5, where: { orderStatus: 0 } }).then((res) => {
      console.log(res, 123);
      res.data.res.map((item) => {
        item.key = item.id;
      });
      setDataSource(res.data.res);
      setAll(res.data.all);
    });
  }

  const pagination = {
    total: all,
    pageSize: 5,
    defaultCurrent: 1,
    onChange: CheckChange,
  };
  return (
    <div className="Nav">
      <Form
        layout="inline"
        initialValues={{ remember: true }}
        onFinish={onFinish}
      >
        <Form.Item label="搜索时间类型:" name="timeType">
          <div>
            <Select style={{ width: 150 }} defaultValue="0">
              <Option value="0">未选定</Option>
              <Option value="1">按下单时间</Option>
              <Option value="2">按付款时间</Option>
              <Option value="3">按发货单打印时间</Option>
              <Option value="4">按快递单打印时间</Option>
              <Option value="5">按发货时间</Option>
            </Select>
            <Input placeholder="请输入内容" className="antInput" />
          </div>
        </Form.Item>

        <Form.Item label="订单状态:" name="orderStatus" initialValue="0">
          <Select style={{ width: 150 }}>
            <Option value="0">全部</Option>
            <Option value="1">待付款</Option>
            <Option value="2">待发货</Option>
            <Option value="3">已关闭</Option>
            <Option value="4">已发货</Option>
            <Option value="5">退款中</Option>
            <Option value="6">已完成</Option>
          </Select>
        </Form.Item>

        <Form.Item label="选择查询条件:" name="selectType">
          <div>
            <Select style={{ width: 150 }} defaultValue="0">
              <Option value="0">全部</Option>
              <Option value="1">商品名称</Option>
              <Option value="2">订单编号</Option>
              <Option value="3">姓名</Option>
              <Option value="4">手机号</Option>
            </Select>
            <Input placeholder="请输入内容" className="antInput" />
          </div>
        </Form.Item>

        <Form.Item label="打印类型:" name="printType" initialValue="0">
          <Select style={{ width: 150 }}>
            <Option value="0">全部</Option>
            <Option value="1">发货单</Option>
            <Option value="2">快递单</Option>
          </Select>
        </Form.Item>

        <Form.Item label="打印状态:" name="printStatus" initialValue="0">
          <Select style={{ width: 150 }}>
            <Option value="0">全部</Option>
            <Option value="1">已打印</Option>
            <Option value="2">未打印</Option>
          </Select>
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit">
            搜索
          </Button>
        </Form.Item>
      </Form>
      <Table
        dataSource={dataSource}
        columns={columns}
        bordered
        id="table"
        pagination={pagination}
      />
      <div className="DataIndexModuleList">
        <div className="nav">
          <Button type="primary" size="large" onClick={Print}>
            打印团长单
          </Button>
          <Button type="primary" size="large">
            打印发货单
          </Button>
          <Button type="primary" size="large">
            打印采购单
          </Button>
          <Button type="primary" size="large">
            打印配货单
          </Button>
          <Button type="primary" size="large">
            打印路线单
          </Button>
          <Button type="primary" size="large">
            打印快递单
          </Button>
        </div>
      </div>
    </div>
  );
}
